<template>
	<view class="uni-container">
		<uni-forms ref="form" :model="formData" validateTrigger="bind" label-width="200">
			<uni-forms-item name="avatar" label="骑手头像">
				<image :src="formData.avatar" mode="widthFix" style="width: 150px;"></image>
			</uni-forms-item>
			<uni-forms-item name="mobile" label="手机号码">
				<uni-easyinput v-model="formData.mobile"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="name" label="骑手姓名">
				<uni-easyinput v-model="formData.name"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="id_card" label="身份证号">
				<uni-easyinput v-model="formData.id_card"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="is_online" label="在线状态">
				<switch @change="binddata('is_online', $event.detail.value)" :checked="formData.is_online"></switch>
			</uni-forms-item>
			
			<uni-forms-item name="status" label="骑手状态">
				<switch @change="binddata('status', $event.detail.value)" :checked="formData.status"></switch>
			</uni-forms-item>
			
			<uni-forms-item name="area" label="配送区域">
				 <uni-data-picker :localdata="area" v-model="formData.area_all" popup-title="请选择区域" @change="onchangeArea"></uni-data-picker>
			</uni-forms-item>

			<uni-forms-item name="examine_status" label="审核状态">
				<uni-data-select v-model="formData.examine_status.value" :clear="false" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			
			
			
			
			<view style="height:50px">
				
			</view>
			<uni-forms-item name="photo" label="手持证件"> 
				<view class="uploadfile" @click="updateFile('hand_id_card')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.hand_id_card" mode="widthFix" style="width:100%"></image>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="photo" label="健康证件">
				<view class="uploadfile" @click="updateFile('health_certificate')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.health_certificate" mode="widthFix" style="width:100%"></image>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="photo" label="身份证/正">
				<view class="uploadfile" @click="updateFile('id_card_zheng')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.id_card_zheng" mode="widthFix" style="width:100%"></image>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="photo" label="身份证/反">
				<view class="uploadfile" @click="updateFile('id_card_fan')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.id_card_fan" mode="widthFix" style="width:100%"></image>
					</view>
				</view>
			</uni-forms-item>
			<view v-if="!loading">
				<view>
					骑手位置
				</view>
				<map style="width: 100%; height: 300px;" :longitude="formData.location.coordinates[0]"
					:latitude="formData.location.coordinates[1]" :markers="covers"></map>
			</view>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;">
					<button class="uni-button" style="width: 100px;">返回</button>
				</navigator>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		validator
	} from '@/js_sdk/validator/rider_users.js';

	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'rider_users';

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				result[key] = validator[key]
			}
		}
		return result
	}
	export default {
		data() {
			let formData = {
				"user_id": "",
				"mobile": "",
				"name": "",
				"avatar": "",
				"id_card": "",
				"is_online": true,
				"order_number": 0,
				"status": true,
				"order_total_number": 0,
				"money": 0,
				"create_date": null,
				"location": null,
				"examine_status": {value:0},
				"photo": null,
				"area":null,
				"area_all":[]
			}
			return {
				loading: true,
				range:[
					{
						value:0,
						text:'审核中'
					},{
						value:1,
						text:'审核通过'
					},{
						value:2,
						text:'审核不通过'
					}
				],
				covers: [],
				formData,
				area:[],
				formOptions: {},
				imagestyle: {
					"height": 160, // 边框高度
					"width": 160, // 边框宽度
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
					}
				},
				rules: {
					...getValidator(Object.keys(formData))
				}
			}
		},
		onLoad(e) {
			if (e.id) {
				const id = e.id
				this.formDataId = id
				this.getDetail(id)
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
			this.getArea();
		},
		methods: {
			//设置区域
			onchangeArea(e){
				this.formData.area_all = e.detail.value;
				this.formData.area = e.detail.value[e.detail.value.length - 1];
			},
			//获取配送区域
			getArea(){
			 db.collection('region_city').get().then(res=>{
				 this.area = res.result.data;
			 });
			  
			},
			/**
			 * 验证表单并提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				this.$refs.form.validate().then((res) => {
					return this.submitForm(res)
				}).catch(() => {}).finally(() => {
					uni.hideLoading()
				})
			},
			/**
			 * 提交表单
			 */
			submitForm(value) {
				value.area_all = this.formData.area_all;
				// 使用 clientDB 提交数据
				return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
					uni.showToast({
						title: '修改成功'
					})
					this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},
			// 上传图片
			updateFile(photos) {
				let _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({title: "上传中···"})
						let filePath = res.tempFilePaths[0]
						uniCloud.uploadFile({
							filePath: filePath,
							cloudPath: 'rider' + Date.now() + '.jpg',
							success: function(res) {
								uni.showToast({
									title: "上传完成"
								})
								_this.formData.photo[photos] = res.fileID
							},
							fail: function() {
								uni.showToast({
									title: "上传失败"
								})
							}
						})
					}
				});
			},
		// 修改审核状态
			change(e){
				console.log(e);
				this.formData.examine_status = this.range[e]
				console.log(this.formData);
			},
			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).doc(id).field(
					"user_id,mobile,name,avatar,id_card,is_online,order_number,area,area_all,status,order_total_number,money,create_date,location,examine_status,photo"
				).get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						this.formData = data
						let cover = {
							clickable: true,
							title: data.name,
							latitude: data.location.coordinates[1],
							longitude: data.location.coordinates[0],
							iconPath: data.avatar
						}
						this.covers.push(cover)
					}
					this.loading = false
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>
<style>
	.uploadfile {
		width: 150px;
		height: 150px;
		border: 1px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30px 0;
	}

	.uploadfile:hover {
		background: #f9f9f9;
		cursor: pointer;
	}
</style>